<template>
    <div>
        <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <i class="el-icon-star-on"></i> 
        评价管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <i class="el-icon-star-on"></i> 
        {{ breadcrumb }}
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 详情 -->
    <div class="msj_ping_detail">
        <li>
            <p>订单号:</p>
            <p>{{ pingdetail.dingnums }}</p>
        </li>
        <li>
            <p>评价商品:</p>
            <div class="spininfo_detail">
                <span>{{ pingdetail.spininfo?.name }}</span>
                <div>
                  <img :src="pingdetail.spininfo?.img" alt="">  
                </div>
                
            </div>
        </li>
        <li>
            <p>评价买家:</p>
            <p>{{ pingdetail.pjmaijia }}</p>
        </li>
        <li>
            <p>评价等级:</p>
            <el-rate
  :value="Number(pingdetail.pfdengji) "
  disabled>
</el-rate>
        </li>
        <li>
            <p>首次评价:</p>
            <div class="first_ping">
                <span>{{ pingdetail.firstpj?.first }}</span>
                <div class="first_ping_img">
                    <img v-if="pingdetail.firstpj?.img" :src="pingdetail.firstpj?.img" alt="">
                    <i class="el-icon-picture-outline" v-else></i>
                </div>
            </div>
        </li>
        <li v-show="shshow">
            <p>审核状态:</p>
            <div>
                <el-radio-group v-model="radio" >
            <el-radio :label="1" >通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
            <el-radio :label="2">审核中</el-radio>
            </el-radio-group>
            </div>
        </li>
        <li v-show="hfshow">
            <p>回复:</p>
            <div>
                <el-input
     :keyup="textarea2=textarea2.replace(/\s+/g, '')"           
  type="textarea"
  :autosize="{ minRows: 4, maxRows: 7}"
  placeholder="请输入内容"
  v-model="textarea2">
</el-input>
            </div>
        </li>
            <el-button type="primary" v-show="btnshow" style="padding: 10px 15px;" size="small"  @click="handel">提交</el-button>
            <el-button style="padding: 10px 10px;" size="small" @click="goback">返回列表</el-button>
    </div>
    </div>
</template>

<script>
import {putmsjpingjia} from '../../../utils/api'
export default {
    name: 'PhaemacyDetailEvaluate',

    data() {
        return {
            pingdetail:{},
            breadcrumb:'',
            radio:1,
            btnshow:1,
            shshow:1,
            hfshow:1,
            textarea2:''
        };
    },

    mounted() {
       let {data}=this.$route.params;
       let obj=data?data:JSON.parse(sessionStorage.getItem('pingjdetail')) 
       obj.detail.firstpj=JSON.parse(obj.detail.firstpj)
       obj.detail.hfpjia=JSON.parse(obj.detail.hfpjia)
       this.pingdetail=obj.detail
       this.breadcrumb=obj.breadcrumb
       this.btnshow=obj.btnshow
       this.shshow=obj.shshow
       this.hfshow=obj.hfshow
       this.radio=(obj.detail.shstatu=='未审核'||obj.detail.shstatu=='通过')?1:(obj.detail.shstatu=='未通过'?0:2)
    },

    methods: {
        // 返回
        goback(){
            this.$router.go(-1)
        },
        // 提交
        handel(){
            let obj=JSON.parse(JSON.stringify(this.pingdetail))
            
            obj.hfpjia.huifu=this.hfshow?this.textarea2:obj.hfpjia.huifu
            obj.huistatu=obj.hfpjia.huifu==''?'未回复':'已回复'
            obj.shstatu=this.shshow?(this.radio==1?'通过':(this.radio==2?'审核中':'未通过')):obj.shstatu
            obj.spininfo=JSON.stringify(obj.spininfo)
            obj.firstpj=JSON.stringify(obj.firstpj)
            obj.hfpjia=JSON.stringify(obj.hfpjia)
            putmsjpingjia(obj).then(res=>{
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                })
                this.$router.go(-1)
            })
        }
    },
};
</script>

<style  scoped>
    *{
        margin: 0; padding: 0;
    }
    .msj_ping_detail{
        width: 100%; box-sizing: border-box;
        padding: 20px;
    }
    .msj_ping_detail li{
        width: 100%;
        list-style: none; display: flex;
        font-size: 14px; 
        padding: 10px 0;
    }
    .msj_ping_detail li p:nth-child(1){
        margin-right: 15px;
        width: 100px;
    }
    .spininfo_detail img{
        width: 80px;
    }
    .first_ping{

    }
    .first_ping_img{
        width:180px;height: 90px; display: flex;
        justify-content: center; align-items: center;
        background: #eee; margin: 15px 0 0;
        color: #bbb;
        font-size: 16px;
    }
    .first_ping_img img{
        width: 100%;
        height: 100%;
    }


</style>